<template>
  <div class="benfit">
    <div v-for="(v,i) in benfit" :key="i" :class="`benfit${i}`">
      <div class="one_top">
        <div>
          <p>{{ v.title }}</p>
          <p class='viceTitle'>{{ v.viceTitle | vice }}</p>
        </div>
        <!-- <p>1</p> -->
      </div>
      <div class="one_bottom">
        <img :src="v.image" alt />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    benfit: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  filters:{
    vice:function(e){
      var a = e.replace('{','');
      var b = a.replace('}','');
      return b;
    }
  }

};
</script>
<style lang="less" scoped>
.viceTitle{
  color:#f45c7d;
}
.benfit {
  width: 100%;
  height: 650px;
  text-align: center;
  font-size: 14px;

  //   display: flex;
  //   flex-wrap: wrap;
  // justify-content: space-between;
  .benfit0,
  .benfit1,
  .benfit2,
  .benfit3,
  .benfit4,
  .benfit5 {
    // border: 1px solid red;
    box-sizing: border-box;
  }
  .benfit0 {
    width: 50%;
    height: 400px;
    float: left;
    border: 1px solid #999;
    box-sizing: border-box;
    border-right: none;
    border-bottom: none;
    border-left: none;
    // border-collapse:collapse;

    .one_top {
      width: 100%;
      height: 30%;
      display: flex;
      align-items: center;
      justify-content: center;

      p {
        margin: 0px;
      }
    }
    .one_bottom {
      height: 70%;
      object-fit: contain;
      object-position: center;
      img {
        height: 100%;
      }
    }
  }
  .benfit1,
  .benfit2 {
    float: right;
    width: 50%;
    height: 200px;
    display: flex;
    border: 1px solid #999;
    .one_top {
      width: 50%;
      height: 200px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      box-sizing: border-box;
      border-bottom: none;
      border-right: none;

      p {
        margin: 0px;
      }
    }
    .one_bottom {
      width: 50%;
      height: 100%;
      text-align: center;

      img {
        width: 100%;
      }
    }
  }
  .benfit3,
  .benfit4,
  .benfit5 {
    width: 33.3%;
    height: 250px;
    float: left;
    border: 1px solid #999;
    .one_top,
    .one_bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50%;
      width: 100%;
      // line-height: 50%;
      p {
        margin: 0px;
      }
      img {
        width: 50%;
      }
    }
    // }
  }
  .benfit1,
  .benfit2 {
    border-bottom: none;
  }
  .benfit3,
  .benfit4 {
    border-right: none;
  }
  .three_three {
    border-right: none;
  }
}
</style>